import { defineComponent, ref, computed } from 'vue';
// 模拟文章数据，添加标签类型字段
const mockPosts = [
  { id: 1, title: '日记标题 1', content: '日记内容 1', secret: '1234', tagType: '技术' },
  { id: 2, title: '日记标题 2', content: '日记内容 2', secret: '5678', tagType: '生活' },
  { id: 3, title: '日记标题 3', content: '日记内容 3', secret: '9012', tagType: '娱乐' },
  { id: 4, title: '日记标题 4', content: '日记内容 4', secret: '3456', tagType: '技术' },
  { id: 5, title: '日记标题 5', content: '日记内容 5', secret: '7890', tagType: '生活' },
  { id: 6, title: '日记标题 6', content: '日记内容 6', secret: '1122', tagType: '娱乐' },
  { id: 7, title: '日记标题 7', content: '日记内容 7', secret: '3344', tagType: '技术' },
  { id: 8, title: '日记标题 8', content: '日记内容 8', secret: '5566', tagType: '生活' },
  { id: 9, title: '日记标题 9', content: '日记内容 9', secret: '7788', tagType: '娱乐' },
  { id: 10, title: '日记标题 10', content: '日记内容 10', secret: '9900', tagType: '技术' },
];

export default defineComponent({
  setup() {
    const currentPage = ref(1);
    const itemsPerPage = ref(5);
    const showSecretModal = ref(false);
    const selectedPost = ref<any>(null);
    const inputSecret = ref('');
    const currentAction = ref(''); // 记录当前要执行的操作

    const indexOfLastItem = computed(() => currentPage.value * itemsPerPage.value);
    const indexOfFirstItem = computed(() => indexOfLastItem.value - itemsPerPage.value);
    const currentItems = computed(() => mockPosts.slice(indexOfFirstItem.value, indexOfLastItem.value));
    const totalPages = computed(() => Math.ceil(mockPosts.length / itemsPerPage.value));

    const paginate = (pageNumber: number) => {
      currentPage.value = pageNumber;
    };

    const handleActionClick = (post: any, action: string) => {
      selectedPost.value = post;
      currentAction.value = action;
      showSecretModal.value = true;
    };

    const handleSecretSubmit = () => {
      if (inputSecret.value === selectedPost.value.secret) {
        switch (currentAction.value) {
          case 'view':
            console.log('认证成功，查看文章详情');
            break;
          case 'edit':
            console.log('认证成功，修改文章');
            break;
          case 'delete':
            console.log('认证成功，删除文章');
            // 这里可以添加实际的删除逻辑，例如从 mockPosts 中移除该文章
            const index = mockPosts.findIndex(p => p.id === selectedPost.value.id);
            if (index!== -1) {
              mockPosts.splice(index, 1);
            }
            break;
          default:
            break;
        }
        showSecretModal.value = false;
      } else {
        console.log('认证失败');
      }
      inputSecret.value = '';
    };

    return () => (
      <div class="p-8">
        <h1 class="text-3xl font-bold mb-4">日记管理</h1>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  编号
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  标题
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  标签类型
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  操作
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              {currentItems.value.map((post) => (
                <tr key={post.id} class="cursor-pointer">
                  <td class="px-6 py-4 whitespace-nowrap">{post.id}</td>
                  <td class="px-6 py-4 whitespace-nowrap">{post.title}</td>
                  <td class="px-6 py-4 whitespace-nowrap">{post.tagType}</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <button
                      class="text-blue-500 mr-2"
                      onClick={() => handleActionClick(post, 'view')}
                    >
                      查看
                    </button>
                    <button
                      class="text-yellow-500 mr-2"
                      onClick={() => handleActionClick(post, 'edit')}
                    >
                      修改
                    </button>
                    <button
                      class="text-red-500"
                      onClick={() => handleActionClick(post, 'delete')}
                    >
                      删除
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div class="flex justify-center mt-4">
          <ul class="flex list-none">
            {Array.from({ length: totalPages.value }, (_, index) => (
              <li
                key={index}
                class={`px-3 py-1 mx-1 border rounded ${
                  currentPage.value === index + 1 ? 'bg-blue-500 text-white' : 'bg-white text-gray-700'
                } cursor-pointer`}
                onClick={() => paginate(index + 1)}
              >
                {index + 1}
              </li>
            ))}
          </ul>
        </div>

        {showSecretModal.value && (
          <div class="fixed inset-0 bg-gray-500 bg-opacity-75 flex justify-center items-center">
            <div class="bg-white p-8 rounded shadow-md">
              <h2 class="text-2xl font-bold mb-4">秘密认证</h2>
              <input
                type="text"
                class="border border-gray-300 p-2 mb-4 w-full"
                placeholder="请输入秘密"
                v-model={inputSecret.value}
              />
              <button
                class="bg-blue-500 text-white px-4 py-2 rounded"
                onClick={handleSecretSubmit}
              >
                提交
              </button>
              <button
                class="bg-gray-500 text-white px-4 py-2 rounded ml-2"
                onClick={() => (showSecretModal.value = false)}
              >
                取消
              </button>
            </div>
          </div>
        )}
      </div>
    );
  },
});